<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="/main/css/layout.css" rel="stylesheet" type="text/css" />
    <link href="/main/css/jquery.jscrollpane.lozenge.css" rel="stylesheet" type="text/css" />
    <link href="/main/css/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .pic img{
            width: 55px;
            height: 55px;
        }
        #m1{
            width: 100%;
            height: 1000px;
        }
        #msg_board{
            padding-top: 0px;
            margin-left: 50px;
            width: 1500px;
            margin: 0 auto;
        }
        #title{
            width: 100%;
            height: 50px;
            line-height: 50px;
        }
        #title span{
            font-size: 35px;
            display:block;
            text-align:center;
        }
        #message{
            margin: 0 auto;
            width: 1200px;
            height: 600px;
            border-right: 20px;

        }
        #game{
            width: 80%;
            height: 100%;
            float: left;
            background-color: #9f9f9f;
        }
        #video{
            width: 100%;
            height: 550px;
            border: #0c0c0c 1px solid;
            border-right:0px;
        }
        #send{
            width: 1000px;
            height: 50px;
        }
        #send_text{
            margin: 0 auto;
            margin-top: 4px;
            margin-left: 70px;
            height: 30px;
            width: 595px;
            float: left;
            resize: none;
        }
        #send_btn{
            width: 90px;
            height: 30px;
            margin-top: 5px;
            margin-left: 5px;
            float: left;
            cursor: pointer;
        }
        #rank{
            width: 20%;
            height: 100%;
            float: left;
            background-color: #01aaed;
        }
        #talk_board{
            width:100%;
            height: 450px;
            overflow-y:auto;
            border: #0c0c0c 1px solid;
        }
        .message{
            width: 90%;
            height: 38px;
            margin: 0 auto;
            border: 2px #c2be9e solid;
            border-radius: 10px;
            margin-top: 5px;
        }
        .msg_l{
            float: left;
            margin-top: 2px;
            margin-left:5px;
            width: 38px;
            height: 38px;
        }
        .msg_img_d{
            margin: 0 auto;
            width: 30px;
            height: 30px;
            border: 1px black solid;
        }
        .msg_img{
            width: 30px;
            height: 30px;
        }
        .msg_text_d{
            margin-top: 2px;
            width: 150px;
            height: 30px;
            float: left;
            border: 1px black solid;
            margin-left: 5px;
            border-radius: 5px;
        }
        .msg_text{
            margin-top: 5px;
            margin-left: 5px;
            font-size: 10px;
        }
        ::-webkit-scrollbar {
            width: 14px;
            height: 14px;
        }

        ::-webkit-scrollbar-track,
        ::-webkit-scrollbar-thumb {
            border-radius: 999px;
            border: 5px solid transparent;
        }

        ::-webkit-scrollbar-track {
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
        }

        ::-webkit-scrollbar-thumb {
            min-height: 20px;
            background-clip: content-box;
            box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
        }

        ::-webkit-scrollbar-corner {
            background: transparent;
        }
    </style>
</head>

<body>
<!--背景-->
<div class="background"><img src="/main/img/bg1.jpg" alt="加载中" /><div class="logo"></div></div>
<!--主内容开始-->
<div id="container">
    <div id="head">
        <a href="#" class="arrange" id="arrange"></a>
        <div class="h-right">
            <a href="main.html" class="home"></a>
            <img src="/main/img/line.png" width="2" height="50" alt="" />
            <a href="#" class="cloud" id="cloud">
                <div class="same">云同步</div>
            </a>
            <img src="/main/img/line.png" width="2" height="50" alt="" />
            <a href="#" class="bell"><span class="tip">3</span></a>
            <img src="/main/img/line.png" width="2" height="50" alt="" />
            <div class="user">
                <div class="pho"><img id="img" src="/userimg/undefined.jpg" width="52" height="50" alt="" /></div>
                <span id="name">[[*{session.user.user_name}]]
          <div class="user-info" id="twodm">
            <div class="jtt"></div>
            <div class="menu">
              <div class="first">
                <a href="#">个人信息</a>
              </div>
              <div class="second">
                <a href="#">通知<em>3</em></a>
              </div>
              <a href="gologout" class="quit" >退出</a>
            </div>
          </div>
        </span>
            </div>
            <img src="/main/img/line.png" width="2" height="50" alt="" />
            <a href="#" class="notice" id="notice"></a>
        </div>
    </div>
    <!--侧边栏-右-->
    <div class="side-bar" id="side-bar">
        <div class="side-bar-in">
            <ul class="tab">
                <li class="title vtitle">
                    <a href="#" class="lianxi"></a>
                </li>
                <li class="title">
                    <a href="#" class="heart"></a>
                </li>
                <li class="title">
                    <a href="#" class="setting"></a>
                </li>
                <div class="vcon vcon1" id="vcon" style="display:block;" >
                    <ul>
                        <li class="xuanz" th:each="user,userStat:${application.userlist}">
                            <div class="pic"><img th:src="${user.user_img_path}+${user.user_img_name}"></div>
                            <span>
                <h4 th:text="${user.user_name}"></h4>
                <p th:text="${user.user_status}"></p>
              </span>
                            <a href="#" class="v-big"></a>
                    </ul>
                </div>
                <div class="vcon">2</div>
                <div class="vcon">
                    <div class="block">
                        <span>背景颜色选择</span>
                        <a href="#" class="dot" id="blue"><img src="/main/img/blue_dot.png" width="14" height="14" alt="" /></a>
                        <a href="#" class="dot" id="pink"><img src="/main/img/pink_dot.png" width="14" height="14" alt="" /></a>
                        <a href="#" class="dot" id="green"><img src="/main/img/green_dot.png" width="14" height="14" alt="" /></a>
                    </div>
                </div>
            </ul>
        </div>
    </div>
    <!--左侧栏begin-->
    <div class="left-bar" id="left-bar">
        <ul>
            <!--      <li><a href="#" class="synergy">医技协同<em>医技协同</em></a></li>-->
            <!--      <li><a href="#" class="movie">影像诊断<em>影像诊断</em></a></li>-->
            <!--      <li><a href="#" class="computer">预约协同<em>预约协同</em></a></li>-->
            <!--      <li><a href="#" class="drug">预交金管理<em>预交金管理</em></a></li>-->
            <!--      <li><a href="#" class="results">个人绩效<em>个人绩效</em></a></li>-->
        </ul>
    </div>
    <!--左侧栏end-->
    <!--模块-->
    <div id="main">
        <div class="left-side">
            <div class="main_visual">
                <a href="javascript:;" id="btn_prev"></a>
                <a href="javascript:;" id="btn_next"></a>
                <div>
                    <ul>
                        <li>
                            <div id="m1">
                                <div id="msg_board">
                                    <div id="title">
                                        <span>观影院</span>
                                    </div>
                                    <div id="message">
                                        <div id="game">
                                            <div id="video">
                                                <input type="hidden" id="video_p" th:value="${application.videopath}" >
                                                <a id="video_a" th:href="${application.videopath}"></a>
                                            </div>
                                            <div id="send">
                                                <textarea id="send_text" maxlength="25"></textarea>
                                                <button id="send_btn" onclick="send()">发送</button>
                                            </div>
                                        </div>
                                        <div id="rank">
                                            <div id="changevideo">
                                                <input id="video_path" type="text" value="输入bilibili视频BV号 例:BV123456789"/>
                                                <button id="video_up" onclick="videoup()" >提交</button>
                                            </div>
                                            <div id="talk_board">
                                                <div class="message">
                                                    <div class="msg_l">
                                                        <div class="msg_img_d">
                                                            <img class="msg_img" src="/userimg/undefined.jpg"/>
                                                        </div>
                                                    </div>
                                                    <div class="msg_text_d">
                                                        <span class="msg_text">
                                                            这个视频,很有趣
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--主内容结束-->
<style>
    .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
</body>

<script src="/main/js/jquery-1.7.1.min.js" language="javascript" type="text/javascript"></script>
<script src="/main/js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="/main/js/jquery.jscrollpane.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/main/js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="/main/js/jquery.touchSlider.js"></script>
<script type="text/javascript" src="/main/js/jquery.nicescroll.js"></script>
<script src="/main/js/slide.js" language="javascript" type="text/javascript"></script>
<script>
    var _bilioption= {"container":"#video","position":"self","width":"960px","height":"550px"};
</script>
<script asyn="asyn" src="//cdn.jsdelivr.net/gh/sl514/myres@master/biliparse.js"></script>
<script th:inline="javascript">
    function setImg(){
        var imgObjPreview=document.getElementById("img");
        imgObjPreview.src = [[*{session.user.user_img_path}]] + [[*{session.user.user_img_name}]] ;
    }
</script>
<script type="text/javascript">
    $(function() {
        init();
    })
    function init() {
        setImg();
    }
    function send(){
        var text = $('#send_text').val();
        if(text!=""||text!=null){
            $.ajax({
                type:"post",//请求类型
                url:"sendtalk",//请求地址
                dataType:"json",//交互的数据类型
                data:{
                    talk:text
                },
                cache:false,//去除请求的缓存
                success:function(){
                    alert("发送成功");
                    getTalkList();
                }
            });
        }else{
            alert("请输入发送内容");
        }
    }
    function videoup() {
        var videopath = $("#video_path").val();
        if(videopath=="输入bilibili视频BV号 例:BV123456789" || videopath=="" || videopath==null){
            alert("请输入地址");
            return;
        }
        if(videopath != "" || videopath != null){
            $.ajax({
                type:"post",//请求类型
                url:"changevideo",//请求地址
                dataType:"json",//交互的数据类型
                data:{
                    videopath:videopath
                },
                cache:false,//去除请求的缓存
                success:function(){
                    alert("发送成功");
                    getVideoPath();
                }
            });
        }else{
            alert("请输入视频地址");
        }
    }
    function getVideoPath(){
        var p = "";
        $.ajax({
            type:"post",//请求类型
            url:"getvideopath",//请求地址
            dataType:"text",//交互的数据类型
            success:function(date){
                var videopath = $("#video_p").val();
                p = date;
                if(videopath!=date){
                    location.reload();
                }
            }
        });
    }

    var flag = 0;
    function getTalkList() {
        $.ajax({
            type:"post",//请求类型
            url:"gettalk",//请求地址
            dataType:"text",//交互的数据类型
            cache:false,//去除请求的缓存
            success:function(msg){
                var result = $.parseJSON(msg);
                var list = result.talks;
                if(flag!=list.length){
                    flag = list.length;
                    var html = "";
                    for(var i=0;i<list.length; i++){
                        var m = list[i];
                        html += "<div class=\"message\"><div class=\"msg_l\">";
                        html += "<div class=\"msg_img_d\">";
                        html += "<img class=\"msg_img\" src=\""+m.user.user_img_path+m.user.user_img_name+"\"/>";
                        html += "</div></div><div class=\"msg_text_d\">";
                        html += "<span class=\"msg_text\">"+m.msg_content+"</span>";
                        html += "</div></div>";
                    }
                    $('#talk_board').html($('#talk_board').html()+html);
                }
            },
            error:function() {
                alert("error");
            }
        });
    }

</script>
<script language="JavaScript">
    setInterval(function(){getVideoPath();},2500);
    setInterval(function(){getTalkList();},1000);
    //指定1秒刷新一次
</script>
</html>
